<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>商品管理</li>
    <li>添加</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>商品信息</span></div>
  <form id="form">
  <ul class="forminfo">
    <li>
      <label>品牌名称</label>
      <select class="dfselect" name="brandName" id="brandName">
      	  <option>请选择</option>
          <option>联想</option>
          <option>海尔</option>
        </select>
      <i>必选</i>
    </li>
    <li>
      <label>商品类型</label>
      <select class="dfselect" name="typeName" id="typeName">
      	  <option>请选择</option>
          <option>笔记本</option>
          <option>电视机</option>
        </select>
      <i>必选</i>
    </li>
    <li>
      <label>商品型号</label>
      <input name="productModel" type="text" class="dfinput" id="productModel"/>
      <i class="modelTip">必填，不能超过50个字符</i>
    </li>
    <li>
      <label>厂商</label>
      <input name="firmName" type="text" class="dfinput" id="firmName"/>
      <i class="firmTip">必填，不能超过50个字符</i>
    </li>
    <li>
      <label>单位</label>
      <input name="productUnit" type="text" class="dfinput" id="productUnit"/>
      <i class="unitTip">必填，不能超过10个字符</i>
    </li>
    <li>
      <label>单价</label>
      <input name="productPrice" type="text" class="dfinput" id="productPrice"/>
      <i class="priceTip">必填，不能超过10个字符</i>
    </li>
    <li>
      <label>状态</label>
      <select class="dfselect" name="productStatus" id="productStatus">
          <option value="1">可用</option>
          <option value="2">不可用</option>
        </select>
      <i>必选</i>
    </li>
    <li>
      <label>创建人</label>
      <input name="createId" type="hidden" id="createId" value="101"/>
      <input name="createName" type="text" id="createName" value="马云" readonly="readonly" class="roinput" />
      <i>不能编辑</i>
    </li>
    <li>
      <label>创建时间</label>
      <input name="createTime" id="createTime" type="text" readonly="readonly" class="roinput" />
      <i>不能编辑</i>
    </li>
    <li>
      <label>&nbsp;</label>
      <input name="" type="submit" class="btn" value="确定"/>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input name="" type="button" class="btn" value="返回" onclick="window.location.href='productList.html'"/>
    </li>
  </ul>
  </form>
</div>
<script type="text/javascript">
  let firmList=[]
  axiosJson(
          'get',//提交方法
          '/purchase/firmName',//提交地址
          null,
          null
  ).then((res) => {
    firmList = res.data.resultData;
  })
  $(function () {
    //获取当前时间
    let s = new Date().toLocaleString();
    s = s.replaceAll("/","-")
    $('#createTime').val(s);

    //获取user
    $('#createId').val(localStorage.getItem('uId'));
    $('#createName').val(localStorage.getItem('username'));

    brandType();

    $('#productModel').blur(checkModel);
    $('#productUnit').blur(checkUnit);
    $('#productPrice').blur(checkPrice);
    $('#firmName').blur(checkFirm);

    $('#form').submit(function () {
      if (checkUnit()&&checkModel()&&checkPrice()&&checkFirm()){
        let product=$('#form').serializeArray();
        axiosJson(
                'get',//提交方法
                '/purchase/addProduct',//提交地址
                product,
                null
        ).then((res) => {
          location.href="productList.html";
        })
      }
      return false;
    })


  })

  //厂商是否存在验证
  function checkFirm() {
    $('.firmTip').html("");
    let flag=true;
    let firmName=$('#firmName').val();
    if (firmName==null||firmName==''){
      $('.firmTip').html("厂商不能为空").css("color","red");
      flag=false;
    }else {
      for (let i = 0; i < firmList.length; i++) {
        if (firmName==firmList[i]){
          flag=false;
          $('.firmTip').html("厂商已存在").css("color","red");
          break;
        }
      }
    }
    return flag;
  }

  function brandType() {
    axiosJson(
            'get',//提交方法
            '/purchase/brandType',//提交地址
            null,
            null
    ).then((res) => {
      let audit=res.data.resultData;
      let lis=''
      $.each(audit,function (k,v) {
        lis+='<option>'+k+'</option>';
      })
      $('#brandName').change(function () {
          let brandName=$('#brandName').val();
          let typeName = audit[brandName];
          let str=''
          for (let i=0;i<typeName.length;i++){
            str+='<option>'+typeName[i]+'</option>';
          }
          $('#typeName').html(str);
      }).html(lis).change();
    })
  }

  //商品型号验证
  function checkModel() {
    let model=$('#productModel').val();
    if (model==null||model==''){
      $('.modelTip').html("商品型号不能为空").css("color","red");
      return false;
    }else {
      $('.modelTip').html("");
    }
    return true
  }
  //商品单位验证
  function checkUnit() {
    let unit=$('#productUnit').val();
    if (unit==null||unit==''){
      $('.unitTip').html("单位不能为空").css("color","red");
      return false;
    }else {
      $('.unitTip').html("");
    }
    return true
  }
  //商品单价验证
  function checkPrice() {
    let price=$('#productPrice').val();
    if (price==null||price==''){
      $('.priceTip').html("单价不能为空").css("color","red");
      return false
    }else {
      $('.priceTip').html("");
    }
    return true
  }

</script>
</body>
</html>
